<template>
  <div>
    <el-row>
      <el-col :span="8" >
        <h4 style="margin:0">
          <span>动态管理</span>
          
        </h4>
      </el-col>
      <el-col :span="16" style="text-align:right;position:relative,;z-index:999" >
        <span v-show="checkleng.length>0 && userRole.DN_201002" style="position:absolute;right:10px;">
          <!-- <el-button class="addBtn" type="success" >审核通过</el-button>
          <el-button class="addBtn" type="warning">取消通过</el-button> -->
          <el-button class="addBtn" type="danger" @click="deleteFun">清空</el-button>
        </span>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first">
        <my-table v-if="navStatus == -1" ref="refData" :navStatus="navStatus" @checkFun = 'checkShowBtn'   ></my-table>
      </el-tab-pane>

      <el-tab-pane label="待审核" name="second">
        <my-table  v-if="navStatus == 0"  ref="refData"  :navStatus="navStatus"  @checkFun = 'checkShowBtn'    ></my-table>
      </el-tab-pane>

      <el-tab-pane label="审核通过" name="third">
        <my-table v-if="navStatus == 1" ref="refData"  :navStatus="navStatus"   @checkFun = 'checkShowBtn'   ></my-table>
      </el-tab-pane>

      <!-- <el-tab-pane label="已删除" name="fourth">
        <my-table v-if="navStatus == 2" ref="refData"  :navStatus="navStatus"  @checkFun = 'checkShowBtn'     ></my-table>
      </el-tab-pane> -->
    </el-tabs>
    
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>  
  import myTable from './Dynamic/myTable'
  import Http from '@/Http/Http'
  export default {
    data() {
      return {
        userRole:JSON.parse(sessionStorage.getItem('userSolt')),
        dialogVisible:false,
        activeName: 'first',
        checkleng:'',
        tableData: [],
        navStatus:-1,

      }
    },
   
    components:{
      myTable
    },
    mounted() {
      var obj = document.getElementById('centerbox')
      obj.addEventListener('scroll', this.handleScroll,true)
    },
    destroyed(){
      var obj = document.getElementById('centerbox')
      obj.removeEventListener('scroll', this.handleScroll,true)
    },
    methods: {
      handleScroll() {
        var scollobj = document.getElementById('centerbox');
        var scrollTop = scollobj.scrollTop;
        const obj = document.getElementById('tab-first');
        const myobj = obj.parentNode.parentNode;
        if(scrollTop> 32){
          myobj.style.position = 'fixed';
          myobj.style.top = 0;
        } else {
          myobj.style.position = 'relative';
        }
        
      },
      
      
      handleClick(tab, event) {
        this.navStatus = Number(tab.index) -1;
      },
      deletData(val) {
        
      },
    
      exportXlxs() {
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
       //搜索
      sheachFun(val){
        
      },
      
     
    
      checkShowBtn(val) {
        this.checkleng = val
      },
      deleteFun() {
        const ids = [];
        this.checkleng.forEach(element => {
          ids.push(element.dynamicId)
        });
        Http.deleteDynamic({"ids":ids})
        .then( res => {
          
          if( res.data.code == 200 ){
           this.$message.success('删除成功')
           this.$refs.refData.getlist()
          } else if(res.data.code == -1003) {
            this.$message.error(`请求失败原因：${res.data.message}`)
            setTimeout(()=>{
              this.$router.push('/')
            },2000)
          }
       })
       .catch( res => {
         this.$message.error('服务器请求失败')
       })
      }
    }
  }
</script>
<style>
.el-tabs__nav-wrap::after{
  width:0!important;
}
</style>
